<template>
  <div>
    <navigationBar/>
    <div class="user-info">
      <div class="user-header">
        <div type="file" accept="image/png,image/gif,image/jpeg" @change="changeUserPic">
          <img class="user-pic" :src="User_pic" alt="User Avatar"/>
        </div>
      </div>
      <div class="user-details">
        <table class="details-table">
          <tr>
            <td class="label">昵称:</td>
            <td>
              <input class="normal-input" v-model="Nickname"/>
            </td>
          </tr>
          <tr>
            <td class="label">邮箱:</td>
            <td>
              <input class="normal-input" v-model="Email"/>
            </td>
          </tr>
          <tr>
            <td class="label">修改头像:</td>
            <td>
              <input v-on:change="newUserPic" class="file" name="file" type="file" accept="image/png,image/jpeg" @change="changeUserPic" placeholder="更换头像"/>
            </td>
          </tr>
        </table>
      </div>
      <div class="upload-button" @click="uploadNewInfo">保存</div>
      <div class="loading" v-if="uploading == true"><span></span></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'EditUserInfo',
  data() {
    return {
      User_pic: this.globalData.User.User_pic,
      Nickname: this.globalData.User.Nickname,
      Username: this.globalData.User.Username,
      Email: this.globalData.User.Email,
      newUserPic: null,
      uploading: false
    }
  },
  methods: {
    jumpMyOrder() {
      this.$router.push({name: 'OrderList'})
    },
    changeUserPic() {
      this.newUserPic = event.target.files[0]
      const reader = new FileReader()
      reader.readAsDataURL(this.newUserPic)
      reader.onloadend = e => {
        this.User_pic = e.target.result
      }
    },
    uploadNewInfo() {
      this.uploading = true
      if(this.Nickname !== null || this.Email !== null) {
        axios.put(this.globalData.apiURL + '/User/Update', {
          Nickname: this.Nickname,
          Email: this.Email
        }, {
          headers: {
            Authorization: this.globalData.User.Token
          }
        })
          .then(res => {
            this.globalData.User.Nickname = this.Nickname
            this.globalData.User.Email = this.Email
          })
      }
      if(this.newUserPic != null) {
        let formData = new FormData()
        formData.append('file', this.newUserPic);
        console.log(this.newUserPic)
        axios.post('https://picui.cn/api/v1/upload', formData, {
          headers: {
            'content-type': 'multipart/form-data',
            'Authorization': 'Bearer 485|X7rdT9q6ExOlOME8hAvZcaYJ9BVWHkh3baBJ9LhE'
          }
        })
          .then(res => {
            this.globalData.User.User_pic = res.data.data.links.url
            axios.patch(this.globalData.apiURL + '/User/UpdateAvatar?avatarUrl=' + res.data.data.links.url, null, {
              headers: {
                Authorization: this.globalData.User.Token
              }
            })
              .then(res => {
                localStorage.setItem('UserJSON', JSON.stringify(this.globalData.User))
                this.$router.go(-1)
              })
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$router.go(-1)
      }
    }
  },
  beforeCreate() {
    this.globalData.User.loadInfo()
    if(this.globalData.User.Token === '' || this.globalData.User.Token === null) {
      this.$router.push({name: 'Connect'})
    } else {
      this.globalData.User.getInfo()
    }
  },
  beforeMount() {
    console.log(this)
    this.uploading = false
    if(this.User_pic === '' || this.User_pic === null) {
      this.User_pic = require('@/assets/' + 'no-avatar.jpg')
    }
  }
};
</script >

<style scoped>
.user-info {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 55px;
}
.user-header {
  text-align: center;
}
.user-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.details-table {
  width: 100%;
  border-collapse: collapse;
}
.details-table td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.label {
  font-weight: bold;
}
.upload-button {
  user-select:none;
  display:block;
  margin:5px auto;
  /* width:max-content;*/
  width:80px;
  text-align: center;
  padding: 2px;
  font-weight: bold;
  color: rgba(42, 42, 42, 0.75);
  border: 3px solid rgba(27, 27, 27, 0.75);
  border-radius: 5px;
}
.upload-button:hover {
  border: 3px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
}
.normal-input {
  border:0px;
  outline:none;
  font-size: 20px
}
.loading {
  text-align: center;
  vertical-align: auto;
}
.loading>span {
  animation: loading 1000ms infinite linear;
  border-radius: 100%;
  border: 6px solid #2d61bb;
  border-left-color: transparent;
  color: transparent;
  display: inline-block;
  line-height: 1.2;
  width: 50px;
  height: 50px;
}
@keyframes loading {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
</style>
